import React, { Component } from 'react'
import { bindActionCreators } from "redux";
import { connect } from 'react-redux'
import { getUser, actions } from "../../store/modules/register"
import img from "../../assets/img/logo1.png"
import "./register.css"
class register extends Component {
    render() {
        let { user, userActions: { changeUser, reqRegister }, } = this.props;
        return (
            <div id="login">
                <div className="top1">
                    <i className="iconfont">&#xe6bc;</i>
                    <h2>手机注册</h2>
                </div>
                <div className="center1">
                    <img src={img} alt="" />
                    <div>
                        <div>
                            <input type="text" value={user.phone} onChange={(e) => changeUser(e.target.value, "phone")} placeholder="手机号" className="yzm" />
                        </div>
                        <div>
                            <input type="text" value={user.nickname} onChange={(e) => changeUser(e.target.value,"nickname")} placeholder="昵称" className="yzm" />
                        </div>
                        <div>
                            <input type="text" value={user.password} onChange={(e) => changeUser(e.target.value, "password")} placeholder="密码" className="yzm" />
                        </div>
                        
                        <button onClick={() => reqRegister(this.props.history)} className="in1">注册</button>
                    </div>
                </div>
            </div>
        )
    }
}

let mapStateToProps = state => {
    return {
        user: getUser(state)
    }
}
let mapDispatchToProps = dispatch => {
    return {
        userActions: bindActionCreators(actions, dispatch),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(register)